<template>
  <footer>
    <router-link
      v-for="item in footernav"
      :key="item.url"
      :to="item.url"
      tag="div"
    >
      <i class="iconfont" :class="item.icont"></i>
      <span>{{ item.title }}</span>
    </router-link>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      footernav: [
        {
          title: "电影/影院",
          icont: "icon-dianying",
          url: "/index/home",
        },
        {
          title: "视频",
          icont: "icon-shipinbofangyingpian",
          url: "/index/videos",
        },
        {
          title: "小视频",
          icont: "icon-shipinbofangyingpian",
          url: "/index/minvideos",
        },
        {
          title: "演出",
          icont: "icon-yanchu-xianxing2-0",
          url: "/index/show",
        },
        {
          title: "我的",
          icont: "icon-ziyuan",
          url: "/index/myself",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
footer {
  .center();
  font-size: @s-font;
  background: #fff;
  width: 100%;
  height: 48px;
  position: fixed;
  bottom: 0;
  border-top: 1px solid @border-color;
  div {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    i {
      font-size: 20px;
    }
  }
  .router-link-active {
    color: @m-color;
  }
}
</style>
